<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>V-model底层原理</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:500px;
				height:120px;
				border:2px solid black;
				margin:50px auto;
				padding:20px;
				box-shadow:10px 20px 20px 10px gray;
			}
			hr{
				margin:20px auto;
			}
			input{
				width:300px;
				height:30px;
				line-height:30px;
			}
			span{
				float:right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<span>v-model底层原理</span>
			<input type="text" :value="str" @input="handleInput">
			<hr><p>{{str}}</p><hr>
		</div>
		
		<script>
			let vm = new Vue({
				el:"#app",
				data:{
					str:"hello"
				},
				methods:{
					handleInput:function(event){
						this.str=event.target.value;
					}
				}
			})
		</script>
	</body>
</html>
